<template>
  <a-row :gutter="24">
    <a-col :md="4" :sm="24">
      <a-card :bordered="false" :loading="treeLoading">
        <a-directory-tree
          v-if="treeList.length"
          :showIcon="false"
          :treeData="treeList"
          @select="handleClick"
          :defaultExpandAll="true"
          :replaceFields="replaceFields"
        />
      </a-card>
    </a-col>
    <a-col :md="19" :sm="24">
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="0">
              <a-col :md="6" :sm="24">
                <a-form-item label="网关名称">
                  <a-select
                    :showSearch="true"
                    optionFilterProp="children"
                    style="width: 100%"
                    v-model="queryParam.gatewayId"
                    allow-clear
                    placeholder="请选择网关名称"
                  >
                    <a-select-option v-for="(item, ind) in gatewayList" :key="ind" :value="item.id">{{ item.gatewayName }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <!--              <a-col :md="6" :sm="24">-->
              <!--                 <span-->
              <!--                   class="table-page-search-submitButtons"-->
              <!--                   style="padding-left: 16px;"-->
              <!--                 >-->
              <!--                   <a-form-item label="网关通道">-->
              <!--                  <a-input v-model="queryParam.gatewayChannel" allow-clear placeholder="请输入网关通道" />-->
              <!--                </a-form-item>-->
              <!--                 </span>-->
              <!--              </a-col>-->

              <a-col :md="(!advanced && 6) || 24" :sm="24">
                <span
                  class="table-page-search-submitButtons"
                  style="padding-left: 16px;"
                  :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
                >
                  <a-button
                    type="primary"
                    class="btn_search_reset"
                    @click="$refs.table.refresh()"><a-icon type="search" />查询</a-button>
                  <a-button
                    style="margin-left: 8px"
                    class="btn_search_reset"
                    @click="
                      () => {
                        queryParam = { deviceIds: deviceIds.toString() }
                        $refs.table.refresh()
                      }
                    "><a-icon type="reload" />重置</a-button
                  >

                </span>

              </a-col>
<!--              <a-col :md="(!advanced && 6) || 24" :sm="24" style="float: right;">-->
<!--                <span class="table-page-search-submitButtons" style="float: right;">-->
<!--      <a-button type="primary" class="btn_add" @click="$refs.batchRegisterForm.batchReg()" icon="plus">手动上传样本</a-button>-->
<!--                  </span>-->
<!--              </a-col>-->
              <!--              <a-col :md="(!advanced && 12) || 24" :sm="24">-->
              <!--                <span-->
              <!--                  class="table-page-search-submitButtons"-->
              <!--                  style="padding-left: 16px;float: right;"-->
              <!--                >-->
              <!--                  <a-button type="primary" class="btn_add" @click="registerNormalModel">注册正样本</a-button>-->
              <!--                  <a-button type="primary" class="btn_add" @click="registerModel()">注册故障</a-button>-->
              <!--                </span>-->
              <!--              </a-col>-->
            </a-row>
          </a-form>
        </div>

        <!--        2022/12/14去掉了多选框-->
        <s-table
          ref="table"
          size="default"
          :columns="columns"
          :data="loadData"
          :alert="true"
        >
          <span slot="fileId" slot-scope="text, record">
            <a @click="$refs.playForm.play(record)">{{ text === null || text === '' ? '无' : '播放' }}</a>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="$refs.detailDlg.init(record)" class="btn_edit">详情</a>
            <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
              <a class="btn_del">删除</a>
            </a-popconfirm>
          </span>
        </s-table>

        <add-form ref="addForm" @ok="handleOk" />
        <edit-form ref="editForm" @ok="handleOk" />
        <play-form ref="playForm" @ok="handleOk" />
        <register-form ref="registerForm" @ok="handleTaskOk" />
        <register-normal-form ref="registerNormalForm" @ok="handleTaskOk"/>
        <task-progress-dlg ref="taskProgressDlg" @ok="handleOk"/>
        <detail-dlg ref="detailDlg"/>
        <batch-register-form ref="batchRegisterForm" @ok="handleOk"/>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { STable } from '@/components'
import { gatewayList } from '@/api/modular/main/bizgateway/bizGatewayManage'
import { page, deleteByGatewayAndChannel } from '@/api/modular/main/bizcollectionsamplemanage/bizCollectionSampleManageManage'
import { treeList } from '@/api/modular/main/bizstation/bizStationManage'
import addForm from './addForm'
import editForm from './editForm'
import taskProgressDlg from './taskProgressDlg'
import playForm from './playForm'
import registerForm from './registerForm'
import registerNormalForm from './registerNormalForm'
import detailDlg from './detailDlg'
import batchRegisterForm from "@/views/main/bizcollectionsamplemanage/batchRegisterForm";

export default {
  components: {
    STable,
    addForm,
    editForm,
    playForm,
    registerForm,
    registerNormalForm,
    taskProgressDlg,
    detailDlg,
    batchRegisterForm
  },

  data () {
    return {
      data: [],
      page: {},
      loading: false,
      advanced: false, // 高级搜索 展开/关闭
      queryParam: {}, // 查询参数
      queryParam1: {}, // 查询参数
      columns: [
        // 表头
        {
          title: '网关名称',
          dataIndex: 'gatewayName'
        },
        {
          title: '网关通道',
          dataIndex: 'gatewayChannel',
          width: 50
        },
        {
          title: '时间',
          dataIndex: 'createAt',
          width: 180,
          align: 'center'
        },
        // {
        //   title: '文件',
        //   dataIndex: 'fileId',
        //   scopedSlots: { customRender: 'fileId' },
        //   with: 50,
        //   align: 'center'
        // },
        {
          title: '文件数量',
          dataIndex: 'fileNumber',
          with: 50,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 50,
          align: 'center'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return page(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      defaultExpandedKeys: [],
      replaceFields: {
        key: 'id'
      },
      stationId: '',
      treeList: [],
      treeLoading: true,
      gatewayList: [],
      deviceIds: [],
      stationTreeIndex: -1,
      // 通道号
      channel: ''
    }
  },
  created () {
    this.getStationTree()
  },
  methods: {
    del (record) {
      deleteByGatewayAndChannel(record)
        .then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        })
        .catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    handleClick (e) {
      if (e.length > 0) {
        this.queryParam = {}
        this.stationId = e.toString()
        this.getGatewayList(e.toString())
      } else {
        this.queryParam.gatewayIds = ''
        this.handleOk()
      }
    },
    getStationTree () {
      treeList(Object.assign(this.queryParam)).then((res) => {
        this.treeLoading = false
        if (!res.success) {
          return
        }
        this.treeList = res.data
      })
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    handleTaskOk (record) {
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    getGatewayList (stationId) {
      gatewayList({ stationId: stationId }).then((res) => {
        if (res.success) {
          this.gatewayList = res.data
          this.gatewayIds = []
          this.gatewayList.filter((value) => {
            this.gatewayIds.push(value.id)
          })
          this.queryParam.gatewayIds = this.gatewayIds.toString()
          this.handleOk()
        }
      })
    },
    registerModel () {
      if (this.selectedRows.length < 3 || this.selectedRows.length > 5) {
        this.$message.error('请选择3到5个文件')
        return
      }
      if (this.validSelectRows() === false) {
        return
      }
      const fileIds = []
      for (let i = 0; i < this.selectedRows.length; i++) {
        fileIds.push(this.selectedRows[i].fileId)
      }
      const record = {
        fileIds: fileIds,
        channel: this.channel
      }
      this.$refs.registerForm.toRegister(record)
    },
    registerNormalModel () {
      if (this.selectedRows.length < 3 || this.selectedRows.length > 5) {
        this.$message.error('请选择3到5个文件')
        return
      }
      if (this.validSelectRows() === false) {
        return
      }
      const fileIds = []
      for (let i = 0; i < this.selectedRows.length; i++) {
        fileIds.push(this.selectedRows[i].fileId)
      }
      const record = {
        fileIds: fileIds,
        channel: this.channel
      }
      this.$refs.registerNormalForm.init(record)
    },
    validSelectRows () {
      // 遍历所有选择，进行网关、通道是否相同的判断
      const infoSet = new Set()
      this.selectedRows.forEach(item => {
        this.channel = item.gatewayChannel
        infoSet.add(item.gatewayCode + item.gatewayChannel)
      })
      if (infoSet.size > 1) {
        this.$message.error('请选择相同网关相同通道的文件')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../assets/css/list.less';
.table-operator {
  margin-bottom: 18px;
}
/*/deep/ .ant-col-md-19 .ant-row{*/
/*  margin-left: 0.5vw !important;*/
/*}*/
button {
  margin-right: 8px;
}
.table-page-search-wrapper{
  padding-left: 10px;
  padding-right: 10px;
  /deep/ .ant-row{
    margin-left: 0px !important;
  }
}
</style>
